<template>
  <view class="dy-scroll-container">
    <dy-navbar :border-bottom="false">模板</dy-navbar>
    <scroll-view class="dy-scroll" scroll-y>
      <dy-card v-for="temp in templates" :key="temp.name">
        <dy-section slot="title" padding="0" :title="temp.title" />
        <template slot="body">
          <dy-grid square col="3" gap="24">
            <dy-grid-item
              v-for="(template, index) in temp.templates"
              :key="template.name"
              :index="index"
              bg-color="#f5f5f5"
              custom-class="dy-radius-22"
              square
            >
              <view
                class="dy-h-100P dy-flex-column-center"
                @tap.stop="handleNavigate(temp.name, template.name)"
              >
                <view class="dy-fz-22 dy-text-center dy-light-gray">{{ template.name }}</view>
                <view class="dy-fz-30 dy-text-center dy-gray dy-mg-top-12">
                  {{ template.zhName }}
                </view>
              </view>
            </dy-grid-item>
          </dy-grid>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  computed: {
    templates() {
      return [
        {
          name: 'scroll',
          title: '滚动布局',
          templates: [
            {
              name: 'sub-scroll',
              zhName: '子区域滚动'
            }
          ]
        },
        {
          name: 'profile',
          title: '我的',
          templates: [
            {
              name: 'form-profile',
              zhName: '我的表单填写'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleNavigate(groupName, name) {
      this.$dy.navi.navigateTo(`pages/template/pages/${groupName}/${name}`)
    }
  }
}
</script>
